import React, { useState } from 'react';
import { LaptopOutlined, UserOutlined } from '@ant-design/icons';
import { Layout, Menu, Button, Image, Breadcrumb, Form, Input, DatePicker } from 'antd';
import moment from 'moment';
import { useNavigate } from 'react-router-dom';

const { Header, Content, Sider } = Layout;

// 定义二级菜单项
const items2 = [
  {
    icon: <UserOutlined />,
    label: "启动会议",
    key: 'startMeeting',
  },
  {
    icon: <LaptopOutlined />,
    label: "历史会议",
    key: 'historyMeeting',
  },
];

// 用户账户页面的路径
const userAccountPath = '/Userinf';
const historyMeetingPath = '/historyMeeting'; // 历史会议页面的路径

function Newvideo() {
  const [form] = Form.useForm();
  const navigate = useNavigate();

  const handleMenuClick = (e) => {
    if (e.key === 'startMeeting') {
      navigate('/svideo'); // 跳转到当前页面
    } else if (e.key === 'historyMeeting') {
      navigate(historyMeetingPath); // 跳转到历史会议页面
    }
  };

  const onFinish = (values) => {
    console.log('Received values of form: ', values);
    // 在这里添加发送数据到服务器的代码
  };

  return (
    <Layout style={{ height: '100vh', margin: 0 }}>
      <Header
        style={{
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'space-between',
          width: '100%',
          height: '64px',
          backgroundColor: 'white',
          borderBottom: '1px solid #e8e8e8',
        }}
      >
        <Image src='/logo.png' preview={false} style={{ width:'70px', marginLeft: '-50px', marginTop: '-10px'}} />
        <div style={{ display: 'flex', alignItems: 'center' }}>
          <Menu
            theme="dark"
            mode="horizontal"
            defaultSelectedKeys={['2']}
            items={[]}
            style={{ flex: 1, minWidth: 0 }}
          />
          <Button
            type="primary"
            shape="circle"
            icon={<UserOutlined style={{ fontSize: '20px' }} />}
            size="large"
            onClick={() => navigate(userAccountPath)}
            style={{ backgroundColor: 'blue', border: '1px solid #ccc' }}
          >
          </Button>
        </div>
      </Header>
      
      <Layout>
        <Sider
          width={200}
          style={{ background: '#fff', borderRight: '1px solid #e8e8e8' }}
        >
          <Menu
            mode="inline"
            defaultSelectedKeys={['startMeeting']}
            items={items2}
            onSelect={handleMenuClick}
            style={{ height: '100%', borderRight: 0 }}
          />
        </Sider>

        <Layout style={{ padding: 0 }}>
          <Content
            style={{
              padding: 24,
              margin: 0,
              minHeight: 'calc(100vh - 64px)',
              background: '#fff',
            }}
          >
            <div style={{ textAlign: 'center', marginBottom: 20 }}>
              <h1>新建视频会议</h1>
            </div>
            <Form
              form={form}
              layout="vertical"
              onFinish={onFinish}
              initialValues={{ meetingTime: moment() }}
              style={{ width: '50%', margin: '0 auto' }}
            >
              <Form.Item
                name="meetingName"
                label="会议名称"
                rules={[{ required: true, message: '请输入会议名称!' }]}
              >
                <Input placeholder="请输入会议名称" />
              </Form.Item>

              <Form.Item
                name="meetingTime"
                label="会议时间"
                rules={[{ required: true, message: '请选择会议时间!' }]}
              >
                <DatePicker
                  showTime
                  format="YYYY-MM-DD HH:mm:ss"
                  placeholder="选择会议时间"
                />
              </Form.Item>

              <Form.Item
                name="meetingDescription"
                label="会议描述"
              >
                <Input.TextArea
                  placeholder="请输入会议描述"
                  rows={4}
                />
              </Form.Item>

              <Form.Item style={{ display: 'flex', justifyContent: 'center', marginBottom: 0 }}>
                <Button type="primary" htmlType="submit">
                  创建会议
                </Button>
              </Form.Item>
            </Form>
          </Content>
        </Layout>
      </Layout>
    </Layout>
  );
}

export default Newvideo;